<template>
  <div class="lwq-collapse-item"
  :class="{
    'is-disabled': disabled
  }">
    <div 
      class="lwq-collapse-item__header" 
      :class="{
        'is-disabled': disabled,
        'is-active': isActive
      }"
      :id="`item-header-${name}`" 
      @click="handleClick">
      <!-- 具体插槽不传的时候默认显示title内容 -->
      <slot name="title"> {{ title }}</slot>
      <lwq-icon icon="angle-right" class="header-angle"></lwq-icon>
    </div>
    <Transition name="slide" v-on="transitionEvents">
       <div class="vk-collapse-item__wrapper" v-show="isActive">
         <div class="lwq-collapse-item__content" :id="`item-content-${name}`">
           <slot></slot>
         </div>
       </div>
    </Transition>
    
  </div>
</template>
<script setup lang="ts">
import { computed, inject } from 'vue';
import { collapseContextKey, type CollapseItemProps } from './types';
import LwqIcon from '../Icon/Icon.vue'

defineOptions({
  name: 'LwqCollapseItem'
});
const props = defineProps<CollapseItemProps>();
const collapseContext = inject(collapseContextKey);
const isActive = computed(() => collapseContext?.activeNames.value.includes(props.name));
const handleClick = () => {
  if (props.disabled) { return}
  collapseContext?.handleItemClick(props.name);
}
const transitionEvents: Record<string, (el: HTMLElement) => void> = {
  beforeEnter(el){
    console.log(111, el)
    el.style.height = '0px';
    el.style.overflow = 'hidden';
  },
  enter(el) {
    el.style.height = `${el.scrollHeight}px`
  },
  afterEnter(el) {
     el.style.height = '';
    el.style.overflow = '';
  },
  beforeLeave(el) { 
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },
  leave(el) {
    el.style.height = '0px'
  },
  afterLeave(el) {
    el.style.height = ''
    el.style.overflow = ''
  }
}

</script>
<style scoped>
@import './style.css';
</style>